/*
* 主界面路由页面*/
import React,{Component} from "react";
import {Route,Switch} from 'react-router-dom'
import {connect} from 'react-redux'
import {Redirect} from "react-router-dom";
import Cookies from 'js-cookie'
import {NavBar} from 'antd-mobile'


import {getUser} from "../../redux/actions";
import {getRedirectTo} from "../../utils";
import Laobaninfo from "../laoban-info/laoban-info";
import Dasheninfo from "../dashen-info/dashen-info";
import Laoban from "../laoban/laoban";
import Dashen from "../dashen/dashen";
import Message from "../message/message";
import Personal from "../personal/personal";
import NotFond from "../../components/not-fond/not-fond";
import NavFooter from "../../components/nav-footer/nav-footer";
import Chat from '../chat/chat'
import './main.css'
class Main extends Component{
    // 给组件对象添加属性
    navList = [ // 包含所有导航组件的相关信息数据
        {
            path: '/dashen', // 路由路径
            component: Dashen,
            title: '老板列表',
            icon: 'laoban',
            text: '老板',
            hidden:false
        },
        {
            path: '/laoban', // 路由路径
            component: Laoban,
            title: '大神列表',
            icon: 'dashen',
            text: '大神',
            hidden:false
        },
        {
            path: '/message', // 路由路径
            component: Message,
            title: '消息列表',
            icon: 'message',
            text: '消息',
            hidden:false
        },
        {
            path: '/personal', // 路由路径
            component: Personal,
            title: '用户中心',
            icon: 'personal',
            text: '个人',
            hidden:false
        }
    ]
    componentDidMount() {
        //用户之前登录过（有cookie ），但是当前没有登录（redux中没有_id），这时候需要发送请求
        const userid = Cookies.get('userid')
        const {_id}  = this.props.user
        if (userid&&!_id){
            //发送异步请求获取数据
            console.log("userid有，但是没——id发送请求")
            //发送请求
            this.props.getUser()
        }
    }

    render() {
        //debugger
        //读取cookie中的userid
        const userid = Cookies.get("userid")
        console.log(userid)
        //如果没有就重定向到登录界面
        if (!userid){
            return <Redirect to='/login'></Redirect>
        }
        //如果有就读取redux中的user状态
        const {_id,type,header} = this.props.user
        //如果没有id就返回null，不做任何显示
        //debugger
        if (!_id){
            return null
        }else{//如果有id就显示对应的界面
            console.log(_id)
            //根据请求路径，根据user的type和header 来计算出一个重定向的路由路径，并且自动重定向
            const reqpath = this.props.location.pathname
            console.log(reqpath)
            if (reqpath==="/"){
                //得到一个重定向的路径
                let path =getRedirectTo(type,header)
                return <Redirect to={path}></Redirect>
            }
        }
        const {navList} = this
        const path = this.props.location.pathname//请求的路径
        const currentNav = navList.find(nav=>nav.path===path)//得到当前的nav也可能没有
        //如果请求的页面需要显示底部导航
        if(currentNav){
            if (type==="大神")
            {
                //将老板隐藏
                this.navList[1].hidden = true
            }
            else {

                this.navList[0].hidden = true
            }
        }

        return(
            <div>
                {/*如果当前的请求路径和列表中的相匹配，就显示头部和尾部的navbar,否则就是老板或者大神更新数据的界面，这两个路由界面是不需要头部和尾部标题的*/}
                {currentNav? <div className='block2'><NavBar>{currentNav.title}</NavBar></div>:null}
                <Switch>
                    {
                        navList.map((nav)=><Route key = {nav.path} path={nav.path} component={nav.component}></Route>)
                    }
                   <Route path="/laobaninfo" component={Laobaninfo}/>
                   <Route path="/dasheninfo" component={Dasheninfo}/>
                   <Route path="/chat/:userid" component={Chat}></Route>
                   <Route component={NotFond}></Route>
                </Switch>
                {/*这个div解决导航条遮住内容，导航条是固定定位，脱离了文档流，导致文本会被遮住，只要给内容区域设置下边距就可*/}

                {currentNav? <div className='block'><NavFooter navList={navList} unReadcount={this.props.unReadcount}/></div>:null}
            </div>
        )
    }
}
export default connect(
    state=>({user:state.user,unReadcount :state.chatmsg.unReadcount}),
    {getUser}
)(Main)